<template>
	<view class="homeBox">
		<view class="nav-top">
			<view class="nav-top-left">
				<uni-icons type="plus" size="30" @click="sendMessage"></uni-icons>
			</view>
			<view class="nav-top-mid">
				<ul>
					<li v-for="(item,index) in navList" :key="item.id" :class="{active: index==checked}"
						@click="changeActive(index)">{{item.title}}
					</li>
				</ul>
			</view>
			<view class="nav-top-right">
				<uni-icons type="search" size="30" @click="toSearchMsg"></uni-icons>
			</view>
		</view>
		<view class="msgBox_recommend" v-show="checked==0">
			<messagesBox :messagesList="recommonedList"></messagesBox>
		</view>
		<view class="msgBox_vindicate" v-show="checked==1">
			<messagesBox :messagesList="vindicateList"></messagesBox>
		</view>
		<view class="msgBox_spit" v-show="checked==2">
			<messagesBox :messagesList="spitList"></messagesBox>
		</view>
		<view class="msgBox_announcement" v-show="checked==3">
			<messagesBox :messagesList="announcementList"></messagesBox>
		</view>
		<view class="msgBox_LostAndFound" v-show="checked==4">
			<messagesBox :messagesList="lostAndFoundList"></messagesBox>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				navList: [{
					title: "推荐",
					id: 1
				}, {
					title: "表白",
					id: 2
				}, {
					title: "吐槽",
					id: 3
				}, {
					title: "公告",
					id: 4
				}, {
					title: "失物招领",
					id: 5
				}],
				checked: 0,
				classfication: '',
				recommonedList: [],
				vindicateList: [],
				spitList: [],
				announcementList: [],
				lostAndFoundList: [],
				isloading: false,
				recommonedDate: '2099-12-31',
				recommonedMid: '',
				vindCateDate: '2099-12-31',
				vindCateMid: '',
				spitDate: '2099-12-31',
				spitMid: '',
				announcementDate: '2099-12-31',
				announcementMid: '',
				lostAndFoundDate: '2099-12-31',
				lostAndFoundMid: '',
				noticeNum: 0,
				nDate: '2099-12-31'

			};
		},
		computed: {
			...mapState('my_Info', ['userInfo'])
		},
		created() {
			this.getRecommoned()

		},
		onLoad() {
			this.getNoticeNum()

			if (uni.getStorageSync('nDate')) {
				this.nDate = JSON.parse(uni.getStorageSync('nDate'))
			}
		},
		methods: {
			changeActive(index) {
				this.checked = index
				switch (index) {
					case 0:
						break
					case 1:
						if (this.vindicateList.length == 0) {
							this.getVindicateMessages()
						}
						break
					case 2:
						if (this.spitList.length == 0) {
							this.getSpitMessages()
						}
						break
					case 3:
						if (this.announcementList.length == 0) {
							this.getAnnouncementMessages()
						}
						break
					case 4:
						if (this.lostAndFoundList.length == 0) {
							this.getLostAndFoundMessages()
						}
						break

				}
			},

			//跳转到搜索帖子
			toSearchMsg() {
				uni.navigateTo({
					url: '/subpkg/searchMsgs/searchMsgs'
				})
			},

			//获取推荐
			async getRecommoned(cb) {
				this.isloading = true

				if (this.recommonedList.length != 0 && this.recommonedList.length % 10 != 0) {
					uni.showToast({
						title: '没有更多数据数据',
						duration: 1500,
						icon: 'none'
					})
					return
				}

				let {
					data: res
				} = await uni.$http.get('/messages/listSomeMessages?classification=&date=' + this.recommonedDate +
					'&mid=' + this.recommonedMid + '&uid=' +
					this.userInfo.uid)
				// 只要数据请求完成就立即按需调用cb回调函数
				cb && cb()
				this.isloading = false
				if (res.code == 2000) {
					this.recommonedList = [...this.recommonedList, ...res.data]

					this.recommonedMid = res.data[res.data.length - 1].mid
					this.recommonedDate = res.data[res.data.length - 1].date

					if (res.data.length == 0) {
						uni.showToast({
							title: '没有更多数据',
							duration: 1500,
							icon: 'none'
						})
					}
				} else {

					uni.showToast({
						title: '数据加载失败',
						duration: 1500,
						icon: 'error'
					})
				}

			},

			// 获取表白帖子
			async getVindicateMessages(cb) {
				this.isloading = true

				if (this.vindicateList.length != 0 && this.vindicateList.length % 10 != 0) {
					uni.showToast({
						title: '没有更多数据数据',
						duration: 1500,
						icon: 'none'
					})
					return
				}

				let {
					data: res
				} = await uni.$http.get('/messages/listSomeMessages?classification=表白&date=' + this.vindCateDate +
					'&mid=' + this.vindCateMid + '&uid=' +
					this.userInfo.uid)
				this.isloading = false
				cb && cb()
				if (res.code == 2000) {
					this.vindicateList = [...this.vindicateList, ...res.data]

					this.vindCateDate = res.data[res.data.length - 1].date
					this.vindCateMid = res.data[res.data.length - 1].mid

					if (res.data.length == 0) {
						uni.showToast({
							title: '没有更多数据',
							duration: 1500,
							icon: 'none'
						})
					}

				} else {
					uni.showToast({
						title: '数据加载失败',
						duration: 1500,
						icon: 'error'
					})
				}
			},

			// 获取吐槽帖子
			async getSpitMessages(cb) {
				this.isloading = true

				if (this.spitList.length != 0 && this.spitList.length % 10 != 0) {
					uni.showToast({
						title: '没有更多数据数据',
						duration: 1500,
						icon: 'none'
					})
					return
				}

				let {
					data: res
				} = await uni.$http.get('/messages/listSomeMessages?classification=吐槽&date=' + this.spitDate +
					'&mid=' + this.spitMid + '&uid=' +
					this.userInfo.uid)
				this.isloading = false
				cb && cb()
				if (res.code == 2000) {
					this.spitList = [...this.spitList, ...res.data]

					this.spitDate = res.data[res.data.length - 1].date
					this.spitMid = res.data[res.data.length - 1].mid

					if (res.data.length == 0) {
						uni.showToast({
							title: '没有更多数据',
							duration: 1500,
							icon: 'none'
						})
					}

				} else {
					uni.showToast({
						title: '数据加载失败',
						duration: 1500,
						icon: 'error'
					})
				}
			},

			// 获取公告帖子
			async getAnnouncementMessages(cb) {
				this.isloading = true
				if (this.announcementList.length != 0 && this.announcementList.length % 10 != 0) {
					uni.showToast({
						title: '没有更多数据数据',
						duration: 1500,
						icon: 'none'
					})
					return
				}

				let {
					data: res
				} = await uni.$http.get('/messages/listSomeMessages?classification=公告&date=' + this.announcementDate +
					'&mid=' + this.announcementMid + '&uid=' +
					this.userInfo.uid)
				this.isloading = false
				cb && cb()
				if (res.code == 2000) {
					this.announcementList = [...this.announcementList, ...res.data]
					this.announcementDate = res.data[res.data.length - 1].date
					this.announcementMid = res.data[res.data.length - 1].mid

					if (res.data.length == 0) {
						uni.showToast({
							title: '没有更多数据',
							duration: 1500,
							icon: 'none'
						})
					}

				} else {
					uni.showToast({
						title: '数据加载失败',
						duration: 1500,
						icon: 'error'
					})
				}
			},


			// 获取失物招领帖子
			async getLostAndFoundMessages(cb) {
				this.isloading = true
				if (this.lostAndFoundList.length != 0 && this.lostAndFoundList.length % 10 != 0) {
					uni.showToast({
						title: '没有更多数据数据',
						duration: 1500,
						icon: 'none'
					})
					return
				}

				let {
					data: res
				} = await uni.$http.get('/messages/listSomeMessages?classification=失物招领&date=' + this
					.lostAndFoundDate +
					'&mid=' + this.lostAndFoundMid + '&uid=' +
					this.userInfo.uid)
				this.isloading = false
				cb && cb()
				if (res.code == 2000) {
					this.lostAndFoundList = [...this.lostAndFoundList, ...res.data]
					this.lostAndFoundDate = res.data[res.data.length - 1].date
					this.lostAndFoundMid = res.data[res.data.length - 1].mid
					if (res.data.length == 0) {
						uni.showToast({
							title: '没有更多数据',
							duration: 1500,
							icon: 'none'
						})
					}

				} else {
					uni.showToast({
						title: '数据加载失败',
						duration: 1500,
						icon: 'error'
					})
				}
			},

			// 发帖子
			sendMessage() {
				uni.navigateTo({
					url: '/subpkg/sendMessage/sendMessage'
				})
			},

			//获取未读数量
			async getNoticeNum() {
				let {
					data: res
				} = await uni.$http.get('/notices/getUnReadCount/' + this.nDate)
				if (res.code == 2000) {
					this.noticeNum = res.data
					if (this.noticeNum != 0) {
						this.setTabbarNum()
					}
				}
			},
			// 设置tabbar数字标
			setTabbarNum() {

				uni.setTabBarBadge({
					index: 2,
					text: this.noticeNum + ''
				})
			}



		},
		mounted() {


		},
		// 上滑加载
		onReachBottom() {

			switch (this.checked) {
				case 0:
					if (this.isloading) return
					this.getRecommoned()
					break
				case 1:
					if (this.isloading) return
					this.getVindicateMessages()
					break
				case 2:
					if (this.isloading) return
					this.getSpitMessages()
					break
				case 3:
					if (this.isloading) return
					this.getAnnouncementMessages()
					break
				case 4:
					if (this.isloading) return
					this.getLostAndFoundMessages()
					break
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			switch (this.checked) {
				case 0:
					this.recommonedMid = ''
					this.recommonedDate = '2099-12-31'
					this.recommonedList = []
					this.isloading = false

					this.getRecommoned(() => uni.stopPullDownRefresh())
					break
				case 1:
					this.vindCateDate = '2099-12-31'
					this.vindCateMid = ''
					this.vindicateList = []
					this.isloading = false
					this.getVindicateMessages(() => uni.stopPullDownRefresh())
					break
				case 2:
					this.spitMid = ''
					this.spitDate = '2099-12-31'
					this.spitList = []
					this.isloading = false
					this.getSpitMessages(() => uni.stopPullDownRefresh())
					break
				case 3:
					this.announcementDate = '2099-12-31'
					this.announcementMid = ''
					this.announcementList = []
					this.isloading = false
					this.getAnnouncementMessages(() => uni.stopPullDownRefresh())
					break
				case 4:
					this.lostAndFoundDate = '2099-12-31'
					this.lostAndFoundMid = ''
					this.lostAndFoundList = []
					this.isloading = false
					this.getLostAndFoundMessages(() => uni.stopPullDownRefresh())
					break
			}

		}
	}
</script>

<style lang="less">
	.nav-top {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.nav-top-mid ul {
			display: flex;
			justify-content: space-between;
			width: 600rpx;

			li {
				padding: 0 4px;
				margin: 0 5px;
				line-height: 30px;
				text-align: center;
				color: #797a7b;
				list-style: none;
			}

			.active {
				color: #3c3c3d;
				border-bottom: 3px solid #ee0a24;
			}
		}
	}
</style>
